<template>
    <div>
        <h2>{{name}}-{{age}}</h2>
        <button @click="changeAge">修改age</button>
    </div>
</template>

<script>
    // toRefs让解构的数据依然是响应式
    // 如果是reactive包裹,解构了,但是没有toRefs 依然不失响应式的
    // 将reactive对象中所有的属性都转成ref,建立链接

    // toRef对其中一个属性进行转换ref,建立连接
    import { reactive, toRefs, toRef } from 'vue';

    export default {
        setup() {
            const info = reactive({name: 'leon', age: 18})
            // 这样拿到的是两个ref
            // let { name, age } = toRefs(info);

            let { name } = info;
            let age = toRef(info, 'age') 


            // let { name, age } = reactive({name: 'leon', age: 18})
            // 相当于
            // let name = 'leon';
            // let age = 18;
            // 这样不是响应式的


            const changeAge = () => {
                // age.value++
                info.age++
            }

            return {
                name,
                age,
                changeAge
            }
        }
    }
</script>

<style scoped>

</style>